<template>
  <div id="Reset ">
    <van-row class="w">
      <van-col span="24">
        <van-nav-bar title="重置密码" left-arrow @click-left="onClickLeft" />
      </van-col>
      <van-col span="24" style="margin-top: 80px;">
        <van-form>
          <van-field style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-model="from.password" type="password" name="密码" label="新密码" placeholder="密码" :rules="rules.password" />
          <van-field style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-model="from.mobile" name="手机号码" label="手机号码" placeholder="手机号码" :rules="rules.mobile" />
          <van-field style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-model="from.code" center label="短信验证码" placeholder="请输入短信验证码">
            <template #button>
              <van-button size="small" type="primary" @click="onGetMsm">发送验证码</van-button>
            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button round block type="info" @click="onSubmit">修改密码</van-button>
          </div>
        </van-form>
      </van-col>
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <van-loading color="#1989fa" />
          </div>
        </div>
      </van-overlay>
    </van-row>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name,
  data() {
    return {
      show: false,
      from: {
        password: '',
        mobile: '',
        code: ''
      },
      rules: {
        username: [{ required: true, message: '请填写用户名' }],
        password: [{ required: true, message: '请填写密码' }],
        mobile: [{ required: true, message: '请填写密码' }]
      }
    }
  },
  methods: {
    onGetMsm() {
      setTimeout(() => {
        //需要定时执行的代码
        this.from.code = '123456'
      }, 1000)
    },
    onClickLeft() {
      this.$router.back()
    },
    // 重置密码
    onSubmit() {
      this.$post('auth/reset', this.from)
        .then(result => {
          if (result.data.errno == 0) {
            Toast.success('修改成功')
            this.$router.push('/login')
          } else {
            Toast.fail(result.data.errmsg)
          }
        })
        .catch(err => {})
    }
  }
}
</script>
<style lang="less" scoped>
.user {
  margin-top: 1.5rem;
  padding: 0.2rem;
  .van-cell {
    border-bottom: 1px solid #ab956c;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
